<template>
  <view class="page">
    <view class="headPart flex align-center justify-between">
      <view class="searchPart bg-white flex align-center">
        <image
          src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/merchant/searchIcon.png"
          class="searchIcon"
          mode="scaleToFill"
        />
        <input
          type="text"
          class="searchInput h-full"
          placeholder="请搜索商品名称"
          @confirm="searchSubmitEvent"
          confirm-type="search"
          v-model="keyword"
          name="search"
          placeholder-class="placeholder"
        />
      </view>
    </view>
    <view class="carousel mx24">
      <carousel :swiperList="swiperList"></carousel>
    </view>
    <view class="blockPart flex justify-between align-center mx24 bg-white">
      <view
        class="blockItem flex flex-column justify-center align-center"
        v-for="(item, index) in blockList"
        @click="jumpToSimilarDetails(item)"
        :key="index"
      >
        <image :src="item.img" :class="item.className" mode="scaleToFill" />
        <view class="f-s-24 col-b5b mt20 fw-600">{{ item.label }}</view>
      </view>
    </view>
    <view class="benefitPart bg-white">
      <view class="flex align-end">
        <view class="benefiTitle col-727 fw-600 f-s-32">每周会员福利</view>
        <view class="benefiTips f-s-20 mb6">（会员每周免费领取，三选一）</view>
      </view>
      <view class="imgPart">
        <view class="flex w-full justify-between align-center">
          <image
            v-for="(item, index) in benefiList"
            :key="index"
            :src="item.img"
            :class="item.active ? 'benefActive' : ''"
            class="benefiImg"
            @click="adjust(item)"
            mode="scaleToFill"
          />
        </view>
        <view class="flex w-full justify-center mt30">
          <view class="benefiBtn f-s-28 col-white">立即领取</view>
        </view>
      </view>
    </view>
    <view class="goodsList">
      <comprehensive :tyepId="543"></comprehensive>
    </view>
    <custom-tabbar :selected="0" @change="onTabChange" />
  </view>
</template>
<script>
import customTabbar from "@/components/custom-tabbar.vue";
import cardModule from "./components/cardModule.vue";
import carousel from "./components/carousel.vue";
import comprehensive from "@/components/comprehensive";
import { mapGetters } from "vuex";
export default {
  components: {
    // dataStatistics,
    customTabbar,
    cardModule,
    carousel,
    comprehensive,
  },
  computed: mapGetters(["isLogin"]),
  data() {
    return {
      swiperList: [
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/homeBanner1.png",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/homeBanner2.png",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/homeBanner3.png",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/homeBanner4.png",
        },
      ],
      benefiList: [
        {
          active: true,
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/testTemplate21.png",
        },
        {
          active: false,
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/testTemplate22.png",
        },
        {
          active: false,
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/testTemplate23.png",
        },
      ],
      blockList: [
        {
          label: "每日签到",
          className: "signIn",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/signIn.png",
        },
        {
          label: "会员专区",
          className: "member",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/member.png",
        },
        {
          label: "产品中心",
          className: "product",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/product.png",
        },
        {
          label: "维生素专区",
          className: "vitamin",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/vitamin.png",
        },
      ],
    };
  },
  mounted() {},
  onShow() {
    // 获取自定义 tabBar 实例并更新选中项
    // this._data.currentIndex = 0;
    // if (typeof this.getTabBar === "function" && this.getTabBar()) {
    //   this.getTabBar().setData({
    //     currentIndex: 0, // 首页对应 list 的索引
    //   });
    // }
  },
  methods: {
    jumpToSimilarDetails(data) {
      let url = `/pages/similar_details/index?id=${543}&name=${"产品中心"}&mark=${1}`;
      uni.navigateTo({
        url,
      });
    },
    adjust(data) {
      this.benefiList.forEach((item) => {
        if (item.img === data.img) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
    },
    onTabChange(index) {
      // 可以在这里处理 Tab 切换的逻辑
    },
    /**
     * 用户点击右上角分享
     */
    // #ifdef MP
    onShareAppMessage: function () {
      let path = "";
      path = `/pages/index/index`;
      return {
        title: "测试",
        imageUrl: "",
        desc: "备注",
        path,
      };
    },
    // #endif
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 120rpx;
  .headPart {
    width: 100% !important;
    padding: 100rpx 24rpx 34rpx 24rpx;
  }
  .mx24 {
    margin: 0rpx 24rpx;
  }
  .searchPart {
    border-radius: 40rpx;
    padding: 0rpx 32rpx;
    width: 376rpx;
    height: 78rpx;
    .searchIcon {
      width: 36rpx;
      height: 39rpx;
    }
    .searchInput {
      margin-left: 10rpx;
    }
  }
  .blockPart {
    padding: 30rpx 50rpx 28rpx 50rpx;
    border-radius: 24rpx;
    .signIn {
      width: 92rpx;
      height: 104rpx;
    }
    .member {
      width: 124rpx;
      height: 88rpx;
    }
    .product {
      width: 86rpx;
      height: 90rpx;
    }
    .vitamin {
      width: 96rpx;
      height: 98rpx;
    }
  }
}
.benefitPart {
  padding: 30rpx 44rpx;
  border-radius: 24rpx;
  margin: 20rpx 24rpx 0rpx 24rpx;
  .benefiTips {
    color: #8f8f91;
  }
  .imgPart {
    margin-top: 34rpx;
    .benefiImg {
      width: 192rpx;
      height: 190rpx;
      border-radius: 22rpx;
      border: 4rpx solid transparent;
    }
    .benefiBtn {
      text-align: center;
      line-height: 70rpx;
      width: 312rpx;
      height: 70rpx;
      background: #11cc7b;
      border-radius: 36rpx;
    }
  }
}
.benefActive {
  border: 4rpx solid #11cc7b !important;
  width: 192rpx;
  height: 190rpx;
}
.col-b5b {
  color: #5b5b5b;
}
.mt30 {
  margin-top: 30rpx;
}
.mb6 {
  margin-bottom: 6rpx;
}
</style>
